{% extends "common/layout.html" %}
{% block content %}

    <div class="row bg-primary">
        <div class="col-sm-10 col-sm-offset-1">
            <h2>移动办公平台数据管理系统</h2>
            <h6>Mobile office platform data management system</h6>
        </div>
    </div>

    <div class="row" style="margin-top: 20px">


        <div class="col-sm-10 col-sm-offset-1 ">

            <div class="row time-pick">

                <div class='col-sm-2 col-sm-offset-6'>
                    <div class="form-group">
                        <label>选择开始时间：</label>
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepickers'>
                            <input type='text' class="form-control" name="starttime" id="starttime"
                                   value="{{ stime }}"/>
                            <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                        </div>
                    </div>
                </div>


                <div class='col-sm-2'>
                    <div class="form-group">
                        <label>选择结束时间：</label>
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepickere'>
                            <input type='text' class="form-control" name="endtime" id="endtime" value="{{ etime }}"/>
                            <span class="input-group-addon">
                    <span class="glyphicon glyphicon-calendar"></span>
                </span>
                        </div>
                    </div>
                </div>


                <div class='col-sm-2'>
                    <div class="form-group">
                        <label></label>
                        <button type="submit" class="btn btn-primary btn-sm btn-block do-pickup " id="dopicker">
                            搜索
                        </button>
                    </div>
                    <script type="text/javascript">
                        {#搜索#}
                        var donepicker = {
                            init: function () {
                                this.eventBind()
                            },
                            eventBind: function () {
                                $(".do-pickup").click(function () {
                                    var stime = $(".time-pick input[name=starttime]").val();
                                    var etime = $(".time-pick input[name=endtime]").val();
                                    var city = "{{ current_user.city }}";
                                    console.log(city);
                                    var urlindex = common_ops.buildUrl("/meeting/meetingsearch?stime=") + stime + "&etime=" + etime + "&city=" + city;
                                    document.location.href = urlindex;

                                });
                            }
                        };
                        $(document).ready(function () {
                            donepicker.init();
                        });

                        {#选择日期相关#}
                        var today = new Date();
                        var tomorrow = new Date(new Date().setDate(new Date().getDate() + 1));

                        $(function () {
                            var picker1 = $('#datetimepickers').datetimepicker({
                                format: 'YYYY-MM-DD',
                                locale: moment.locale('zh-cn'),
                                defaultDate: today.toLocaleDateString()
                                //minDate: '2016-7-1'
                            });
                            var picker2 = $('#datetimepickere').datetimepicker({
                                format: 'YYYY-MM-DD',
                                locale: moment.locale('zh-cn'),
                                defaultDate: tomorrow.toLocaleDateString()
                            });
                            //动态设置最小值
                            picker1.on('dp.change', function (e) {
                                picker2.data('DateTimePicker').minDate(e.date);
                            });
                            //动态设置最大值
                            picker2.on('dp.change', function (e) {
                                picker1.data('DateTimePicker').maxDate(e.date);
                            });
                        });
                    </script>
                </div>


            </div>


            <div class="row">
                <button type="button" class="btn btn-info" data-toggle="modal"
                        data-target="#exampleModal" style="margin-top: 10px;margin-left: 15px" data-name=""
                        data-meetingdate="" data-meetingroom=""
                        data-meetingstime="" data-meetingetime=""
                        data-id="" data-uid="{{ current_user.id }}"><span
                        class="glyphicon glyphicon-plus" aria-hidden="true"></span>管理员新建会议
                </button>

                <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal2"
                        style="margin-top: 10px;margin-left: 5px">上传图片
                </button>

                <a href="{{ buildUrl('/meeting/meetingshow') }}" type="button" class="btn btn-primary"
                   style="margin-top: 10px;margin-left: 15px">预览今日会议 </a>
                <a href="{{ buildUrl('/meeting/meetingshow2') }}" type="button" class="btn btn-primary"
                   style="margin-top: 10px;margin-left: 5px">预览明日会议 </a>

            </div>


            <row class="data-table">
                <table class="table table-bordered table-hover">
                    <tr>
                        <th class="info">会议日期</th>
                        <th class="info">会议时间</th>
                        <th class="info">会议室</th>
                        <th class="info">主题</th>
                        <th class="info">申请部门</th>
                        <th class="info">申请人</th>
                        <th class="info">功能</th>
                    </tr>
                    {% for item in meeting %}
                        <tr>
                            <th>{{ item.meetingdate }}</th>
                            <th>{{ item.meetingstime | showtime }} - {{ item.meetingetime | showtime }}</th>
                            <th>{{ item.meetingroom }}</th>
                            <th>{{ item.name }}</th>
                            <th>{{ item.creater.department }}</th>
                            <th>{{ item.creater.nickname }}</th>

                            <th>
                                <button type="button" class="btn btn-primary" data-toggle="modal"
                                        data-target="#exampleModal" data-name="{{ item.name }}"
                                        data-meetingdate="{{ item.meetingdate }}"
                                        data-meetingroom="{{ item.meetingroom }}"
                                        data-meetingstime="{{ item.meetingstime | showtime }}"
                                        data-meetingetime="{{ item.meetingetime | showtime }}"
                                        data-id="{{ item.id }}" data-uid="{{ item.uid }}">编辑
                                </button>
                                {% if item.mark==1 %}
                                    <a href="{{ buildUrl('/meeting/changemeetingmark') }}?id={{ item.id }}&mark=2&type=2"
                                       class="btn btn-success">投放</a>
                                {% elif item.mark==2 %}
                                    <a href="{{ buildUrl('/meeting/changemeetingmark') }}?id={{ item.id }}&mark=1&type=2"
                                       class="btn btn-warning">下架</a>
                                {% endif %}

                                <a href="{{ buildUrl('/meeting/changemeetingmark') }}?id={{ item.id }}&mark=0&type=2"
                                   class="btn btn-danger" style="margin-left: 50px">删除</a>
                            </th>
                        </tr>

                    {% endfor %}
                </table>
            </row>


        </div>
    </div>

    {#    模态框#}
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">会议信息</h4>
                </div>
                <div class="modal-body">

                    <form class="form" style="margin-top: 10px" method="post"
                          action="{{ buildUrl('/meeting/adminupdate') }}">

                        <input type="text" class="invisible" id="id" name="id">


                        <div class="form-group">
                            <label class="control-label">预约人ID:</label>
                            <input type="text" class="form-control" id="uid" name="uid">
                        </div>

                        <div class="form-group">
                            <label class="control-label">会议名称:</label>
                            <input type="text" class="form-control" id="name" name="name">
                        </div>

                        <div class="form-group">
                            <label for="recipient-name" class="control-label">会议室:</label>
                            <select class="form-control " id="meetingroom" name="meetingroom">
                                <option>请选择</option>
                                <option>22F大会议室</option>
                                <option>22F视频会议室</option>
                                <option>20F1号会议室</option>
                                <option>20F2号会议室</option>
                                <option>20F3号会议室</option>
                                <option>20F4号会议室</option>
                                <option>20F5号会议室</option>
                                <option>20F对外接待室</option>
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="recipient-name" class="control-label">会议日期:</label>
                            <a class='input-group date' id='datetimepicker5'>
                                <input type='text' class="form-control" id="date" name="date"/>
                                <span class="input-group-addon">
		                    <span class="glyphicon glyphicon-calendar"></span>
		                </span>
                            </a>
                        </div>

                        <div class="form-group">
                            <label for="recipient-name" class="control-label">开始时间:</label>
                            <a class='input-group date' id='datetimepicker3'>
                                <input type='text' class="form-control" id="stime" name="stime"/>
                                <span class="input-group-addon">
		                    <span class="glyphicon glyphicon-calendar"></span>
		                </span>
                            </a>
                        </div>


                        <div class="form-group">
                            <label for="recipient-name" class="control-label">结束时间:</label>
                            <a class='input-group date' id='datetimepicker4'>
                                <input type='text' class="form-control" id="etime" name="etime"/>
                                <span class="input-group-addon">
		                    <span class="glyphicon glyphicon-calendar"></span>
		                </span>
                            </a>
                        </div>


                        <script type="text/javascript">
                            $('#datetimepicker5').datetimepicker({
                                format: 'YYYY-MM-DD',
                                locale: moment.locale('zh-cn')
                            });

                            $('#datetimepicker3').datetimepicker({
                                format: 'HH:mm',
                                locale: moment.locale('zh-cn')
                            });

                            $('#datetimepicker4').datetimepicker({
                                format: 'HH:mm',
                                locale: moment.locale('zh-cn')
                            });

                        </script>


                        <div class="modal-footer">
                            <button class="btn btn-primary " name="updata" id="updata" type="submit" value="Submit">
                                修改信息
                            </button>
                        </div>
                    </form>
                    <button class="btn btn-primary do-add" name="add" id="add">新建信息</button>
                </div>


            </div>
        </div>
    </div>




    {#    模态框2#}
    <div class="modal fade" id="exampleModal2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            {#    等待模态#}
            <div class="modal fade" id="loadingModal">
                <div style="width: 200px;height:20px; z-index: 20000; position: absolute; text-align: center; left: 50%; top: 50%;margin-left:-100px;margin-top:-10px">
                    <div class="progress progress-striped active" style="margin-bottom: 0;">
                        <div class="progress-bar" style="width: 100%;"></div>
                    </div>
                    <h5 style="color:black"><strong>正在上传文件，请耐心等待...</strong></h5>
                </div>
            </div>


            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">上传图片</h4>
                </div>

                <div class="modal-body">

                    <div class="form-group">
                        <label for="recipient-name" class="control-label">类型:</label>
                        <select class="form-control " id="classone" name="classone">
                            <option>公告</option>
                            <option>生日榜</option>
                            <option>活动</option>
                        </select>
                    </div>


                    <div class="form-group">
                        <label class="control-label">上传图片:</label>
                        <input id="upload_input" class="admin img-fluid" type="file">
                    </div>

                    <div class="modal-footer">
                        <button class="btn btn-success do-upload" enctype="multipart/form-data">确定上传
                        </button>
                    </div>

                </div>
            </div>
        </div>
    </div>

    <script>
        {#编辑赋值#}
        $('#exampleModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget); // Button that triggered the modal
            var name = button.data('name');
            var date = button.data('meetingdate');
            var meetingstime = button.data('meetingstime');
            var meetingetime = button.data('meetingetime');
            var meetingroom = button.data('meetingroom');
            var id = button.data('id');
            var uid = button.data('uid');

            var modal = $(this)
            {#modal.find('.modal-title').text('New message to ' + recipient);#}
            {#modal.find('.modal-body input').val(recipient)#}
            {#modal.find('.modal-body textarea').val(recipient)#}
            document.getElementById("name").value = name;
            document.getElementById("date").value = date;
            document.getElementById("stime").value = meetingstime;
            document.getElementById("etime").value = meetingetime;
            document.getElementById("meetingroom").value = meetingroom;
            document.getElementById("id").value = id;
            document.getElementById("uid").value = uid;


            if (typeof (id.length) == 'undefined') {
                document.getElementById("add").style.display = "none";
                document.getElementById("updata").style.display = "";

            } else {
                document.getElementById("updata").style.display = "none";
                document.getElementById("add").style.display = "";
            }

        });
    </script>


    <script>
        $(".do-add").click(function () {
            var btnaction = $(this);
            if (btnaction.hasClass("disable")) {
                common_ops.alert("还没提交上去了，别瞎点")
                return
            }

            var name = $("input[id=name]").val();
            var meetingdate = $("input[id=date]").val();
            var meetingroom = $("select[id=meetingroom]").val();
            var stime = $("input[id=stime]").val();
            var etime = $("input[id=etime]").val();
            var uid = "{{ current_user.id }}";
            var city = "{{ current_user.city }}";


            $.ajax({
                url: common_ops.buildUrl("/meeting/meetingorder"),
                type: "POST",
                data: {
                    name: name,
                    meetingdate: meetingdate,
                    meetingroom: meetingroom,
                    stime: stime,
                    etime: etime,
                    uid: uid,
                    city: city,
                },
                dataType: 'json',
                success: function (res) {
                    var callback = null;
                    if (res.code == 200) {
                        callback = function () {
                            window.location.href = common_ops.buildUrl("/meeting/meetingsearch2?city=" + city + "&date=" + meetingdate);
                        };
                    }
                    common_ops.alert(res.msg, callback);
                }
            });

        });
    </script>



{% endblock %}


{% block js %}
    <script src="https://cdn.bootcss.com/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script src="{{ buildStaticUrl('/js/uploadbigshow.js') }}"></script>
{% endblock %}

